<script setup>
	import { onLoad, onReachBottom, onPullDownRefresh } from '@dcloudio/uni-app'
	import { ref } from 'vue'
	import { getPointsList, removeCollet } from '@/api/user'
	import { useUserStore } from '@/store/user'
	
	const user = useUserStore()
	const loading = ref(false)
	const loadStatus = ref('loadmore')
	const query = ref({status: 1, current: 1, size: 20})
	const total = ref(0)
	const list = ref([])
	
	function refreshList(stop = true) {
		if(loadStatus.value === 'loading') return
		loadStatus.value = 'loading'
		list.value = []
		query.value.current = 1
		getPointsList(query.value).then(res => {
			let result = res.result || {}
			let data = result.records || []
			total.value = Number(result.total)
			list.value = data
			let curLength = list.value.length
			loadStatus.value = curLength === total.value? 'nomore' : 'loadmore'
			if(stop) uni.stopPullDownRefresh()
		}).catch(() => {
			loadStatus.value = 'nomore'
			if(stop) uni.stopPullDownRefresh()
		})
	}
	function lowerList(noReplace = true) {
		if(list.value.length < total.value || !noReplace) {
			loadStatus.value = 'loading'
			query.value.current ++
			getPointsList(query.value).then(res => {
				let result = res.result || {}
				let data = result.records || []
				total.value = Number(result.total)
				if(noReplace) {
					list.value.push(...data)
				} else {
					const preList = list.value.slice(0, (query.value.current - 1) * query.value.size)
					list.value = preList.concat(data)
				}
				let curLength = list.value.length || 0
				loadStatus.value = curLength === total.value? 'nomore' : 'loadmore'
			}).catch(() => {
				query.value.current --
				loadStatus.value = 'loadmore'
			})
		}
	}
	function refreshItem(id) {
		let index = list.value.findIndex(item => item.couponId === id)
		if(index != -1) {
			query.value.current = Math.floor(index / query.value.size)
			lowerList(false)
		}
	}
	function exchange(item) {
		if(loading.value) return
		loading.value = true
		let data = {
			total: item.integralRequired,
			list: [{
				id: item.integralId,
				name: item.title,
				furl: item.thumbnailImgs && item.thumbnailImgs[0] && item.thumbnailImgs[0].furl || '',
				price: item.integralRequired,
				number: 1,
				type: 'INTEGRAL'
			}]
		}
		uni.navigateTo({
			url: '/pages/shop/orderConfirm',
			success: res => {
				res.eventChannel.emit('orderConfirm', data)
			}
		})
		loading.value = false
	}
	function goView(item) {
		let url = `/pages/shop/goodsDetail?id=${item.id}&title=${item.name}`
		uni.navigateTo({url})
	}
	
	onReachBottom(() => {
		lowerList()
	})
	onPullDownRefresh(() => {
		refreshList()
	})
	onLoad(() => {
		refreshList(false)
	})
</script>

<template>
	<view class="app-container">
		<view class="app-head">
			<view class="points">{{user.points || 0}}</view>
			<view class="tip">我的积分</view>
		</view>
		<view class="app-content">
			<template v-if="list.length">
				<view class="content-list" >
					<view class="list-box" v-for="item in list" :key="item.id">
						<uv-image :src="item.thumbnailImgs && item.thumbnailImgs[0] && item.thumbnailImgs[0].furl" width="340" height="340"></uv-image>
						<view class="bottom">
							<view class="name">{{item.title || '--'}}</view>
							<view class="info" @click.stop>
								<view class="points">
									<text class="text-points">{{item.integralRequired || '--'}}</text>
									<text class="text-tip">积分</text>
								</view>
								<uv-button color="#FA3F00" shape="circle" size="small" text="兑换" :disabled="loading || user.points < item.integralRequired" 
									@click="exchange(item)" />
							</view>
						</view>
					</view>
				</view>
				<uv-load-more :status="loadStatus" fontSize="28" iconSize="34" marginTop="20" marginBottom="20" isDot line></uv-load-more>
			</template>
			<view class="empty-box" v-else>
				<empty text="没有找到你的商品收藏"></empty>
			</view>
		</view>
	</view>
</template>

<style lang="scss" scoped>
	.app-container{
		.app-head{
			height: 300rpx;
			background-image: url('https://jhgk-1307466921.cos.ap-shanghai.myqcloud.com/opt/AppCollect/PersonJkzImg/2025-03-01/1740820126419_points-bg.png');
			background-color: #FF9D7C;
			background-size: 100%;
			padding-top: 64rpx;
			display: flex;
			flex-direction: column;
			gap: 32rpx;
			align-items: center;
			.points{
				font-weight: 600;
				font-size: 72rpx;
				color: #5F2A09;
			}
			.tip{
				color: #8A7B62;
			}
		}
		.app-content{
			position: relative;
			top: -64rpx;
			padding: 0 24rpx;
		}
		.content-list{
			display: flex;
			align-items: center;
			flex-wrap: wrap;
			gap: 22rpx 24rpx;
			.list-box{
				width: 340rpx;
				background-color: #FFFFFF;
				border-radius: 16rpx;
				overflow: hidden;
				.bottom{
					padding: 12rpx 16rpx;
				}
				.name{
					margin-top: 12rpx;
					font-weight: 600;
				}
				.info{
					margin-top: 16rpx;
					display: flex;
					align-items: center;
					margin-bottom: 10rpx;
					.points{
						flex: 1;
						font-size: var(--theme-lg);
						line-height: var(--theme-lg-line);
					}
					.text-points{
						color: #FF0D0D;
						font-weight: 600;
					}
					.text-tip{
						margin-left: 10rpx;
						font-size: var(--theme-sm);
						color: #999999;
					}
				}
			}
		}
		.empty-box{
			padding: 24rpx;
			background-color: #FFFFFF;
			border-radius: 12rpx;
		}
	}
</style>